<template>
  <div class="repair">
    <!-- 背景图片 -->
    <div class="img-wrap">
        <img src="https://cdn.swellpro.com/newthree/service_1.jpg" alt="">

        <div class="img-content">
            <div class="container">
                <h1>
                    WE CARE ABOUT YOU
                </h1>
            </div>
        </div>
    </div>

    <!-- 正文 -->
    <div class="container" style="padding-top: 40px">
        <div class="left">
            <p class="title">Customer Information</p>

            <Row :gutter="16">
                <Col :span="12">
                    <kv :title="'Firstname:'">
                        <Input :placeholder="'Please enter your first name'"></Input>
                    </kv>
                </Col>

                <Col :span="12">
                    <kv :title="'Zip/Postcode:'">
                        <Input :placeholder="'Please enter your Zip/Postcode'"></Input>
                    </kv>
                </Col>
            </Row>

            <Row :gutter="16">
                <Col :span="12">
                    <kv :title="'Surname:'">
                        <Input :placeholder="'Please enter your Surname'"></Input>
                    </kv>
                </Col>

                <Col :span="12">
                    <kv :title="'Registered email address:'">
                        <Input :placeholder="'Please enter your email address'"></Input>
                    </kv>
                </Col>
            </Row>

            <kv :title="'Street Address:'">
                <Row>
                   <Col :span="24">
                        <Input  :placeholder="'Please enter Street Address'"></Input>
                   </Col>
                </Row>
            </kv>

            <kv :title="'City:'">
                <Row>
                   <Col :span="24">
                        <Input  :placeholder="'Please enter City'"></Input>
                   </Col>
                </Row>
            </kv>

            <Row :gutter="16">
                <Col :span="12">
                    <kv :title="'State:'">
                        <Input :placeholder="'Please enter your State'"></Input>
                    </kv>
                </Col>

                <Col :span="12">
                    <kv :title="'Telephone number:'">
                        <Input :placeholder="'Please enter your  Telephone number'"></Input>
                    </kv>
                </Col>
            </Row>

            <Row :gutter="16">
                <Col :span="12">
                    <kv :title="'Country:'">
                        <Input :placeholder="'Please enter your Country'"></Input>
                    </kv>
                </Col>

                <Col :span="12">
                    <kv :title="'Skype address:'">
                        <Input :placeholder="'Please enter your Skype address (if applicable)'"></Input>
                    </kv>
                </Col>
            </Row>
        </div>

        <div class="right">
            <p class="title">Product Information</p>

             <Row :gutter="16">
                <Col :span="12">
                    <kv :title="'Product Model:'">
                        <Input :placeholder="'Please enter your Product Model'"></Input>
                    </kv>
                </Col>

                <Col :span="12">
                    <kv :title="'Date of purchase:'">
                        <Input :placeholder="'Please enter your Date of purchase'"></Input>
                    </kv>
                </Col>
            </Row>

             <Row :gutter="16">
                <Col :span="12">
                    <kv :title="'Product Serial Number:'">
                        <Input :placeholder="'Please enter your Product Serial Number'"></Input>
                    </kv>
                </Col>

                <Col :span="12">
                    <kv :title="'Place of Purchase:'">
                        <Input :placeholder="'Please enter your  Place of Purchase'"></Input>
                    </kv>
                </Col>
            </Row>

            <kv :title="'Do you have the proof of purchase? (Yes/No):'">
                <Row>
                   <Col :span="24">
                        <Input  :placeholder="'Please enter your purchase'"></Input>
                   </Col>
                </Row>
            </kv>

            <p class="title" style="margin-top: 45px">Service Information</p>

            <kv :title="'Detailed description of problem:'">
                <Row>
                   <Col :span="24">
                        <textarea rows="5" cols="20" placeholder="The description of the accident， Flight mode, damaged parts, flight condition (up, down, forward flight, hovering), drone voltage, GPS signal">
                        </textarea>
                   </Col>
                </Row>
            </kv>
        </div>
    </div>

    <!-- 提交按钮 -->
    <div class="container" style="padding: 20px 0 40px">
        <div class="button" @click="submit">Submit Application</div>
    </div>
  </div>
</template>

<script>
import Kv from '~/components/pc/kv'
import Row from '~/components/pc/row'
import Col from '~/components/pc/col'
import Input from '~/components/pc/input'
import Message from '~/components/pc/message'
export default {
  data () {
    return {
    };
  },

  head() {
    return {
        title: '',
        meta: [
            { hid: 'description', name: 'description', content: ''},
        ]
    }
  },

  components: {
      Kv, Row, Col, Input, Message
  },

  computed: {},

  mounted() {},

  methods: {
      submit () {
          setTimeout(() => {
              this.openMessage('The message has been sent. We will reply very soon.', 'success')
          }, 500);
      }
  }
}

</script>
<style lang='stylus' scoped>
.repair
    .img
        &-wrap
            position relative
            >img
                width 100%
                display block
        &-content
            position absolute
            left 0px
            top 0px
            width 100%
            height 100%
            .container
                width 1000px
                height 100%
                display flex
                align-items center
                justify-content center
                h1
                    text-align left
                    font-weight 100
                    color #fff
                    font-size 40px
    >.container
        width 1000px
        background #fff
        display flex
        flex-flow row no-wrap
        .left
            flex 0 0 50%
            box-sizing border-box
            padding-right 20px
        .right
            flex 0 0 50%
            box-sizing border-box
            padding-left 20px
    .title
        font-weight 500
        font-size 18px
        padding-bottom 10px
        border-bottom 1px solid #000
    .button
        display block
        width 30%
        padding 15px 0px
        background rgb(242, 100, 68)
        margin 0px auto 0px
        border-radius 20px
        color rgb(255, 255, 255)
        text-align center
        font-size 20px
        cursor pointer
textarea,select
    display block
    width 100%
    line-height 1.5
    padding 4px 7px
    font-size 12px
    border 1px solid #dcdee2
    border-radius 4px
    color #515a6e
    background-color #fff
    background-image none
    position relative
    outline none
    cursor text
    font-weight 300
    box-sizing border-box
    transition border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out
    &:focus
        border-color #f26444
</style>